React+Redux开发实录（二）React技术栈一览

React+Redux开发实录（一）搭建工程脚手架
React+Redux开发实录（二）React技术栈一览

React技术栈一览

从上面搭建工程脚手架中，我们看到了React开发技术栈。有ES6、babel、eslint、webpack、react、redux、react-router。

对React新手（有HTML、JavaScript、CSS基础）来说，需明确掌握React和Redux相关概念。至于其他的，了解就可以。不过我们有必要在实践之前从整体上俯瞰一下。清楚来龙去脉，避免迷迷糊糊一味跟随别人的代码去Ctrl+C & Ctrl+V，即痛苦又容易半途而废。

ES6

JavaScript的下一代标准，规定今后按年份发布新版。2015年发布的ECMAScript6.0，也叫ES2015。
实践React之前，建议先了解下ES6的模块化、箭头函数、表达式解构、Promise异步编程。

完整了解ES6，推荐阅读前端大牛Nicholas C. Zakas（尼古拉斯.泽卡斯）的《深入理解ES6》

线上阅读推荐：阮一峰的开源书《ECMAScript6入门》

Babel

JavaScript在不断发展，各种新的标准提案层出不穷，由于浏览器的多样性导致可能几年之内都无法广泛普及。Babel是一个广泛使用的转码器，可以将ES6代码转化为几乎所有浏览器都认识的ES5旧代码，你可以不必顾虑的使用ES新特性。

这里有个Babel的REPL线上编译器。在左侧输入箭头函数f=>f感受下吧。

实践React之前，知道有这么个东西就可以了。Webpack会在构建项目时自动调用Babel进行转换。

线上阅读推荐：React技术栈之Babel

ESlint

ESLint是一个JavaScript代码静态检查工具，可以有效提高代码质量。维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则，也提供用户自定义规则去约束JavaScript风格。

ESLint是Nicholas C. Zakas（尼古拉斯.泽卡斯）创造的。前端大牛，前雅虎前端技术主管，YUI 库的贡献者。当年的我，凭着他的红宝书《JavaScript高级程序设计》，再配合《CSS网站布局实录》，就迈入前端。他同时也是《编写可维护的JavaScript》、《高性能JavaScript》和《深入理解ES6》的作者。

实践React之前，知道有这么个东西就可以了。项目过程中，需要调整规则的时候，参考ESlint完整规则列表

Webpack

Webpack是新一代打包工具。如今，前端项目日渐复杂，构建系统已成为开发过程中不可或缺的部分，而模块打包正是前端构建系统的核心。

实践React之前，了解下webpack就可以。通过ceate-react-app创建的脚手架，执行npm run eject弹出的webpack配置，就已经相当完美了。再集合项目，适当定制就可以了。

线上阅读推荐：
入门webpack
一小时包教会webpack

线上阅读推荐：
React技术栈之Webpack环境搭建（一）手动搭建
React技术栈之Webpack环境搭建（二）不同环境不同配置
React技术栈之Webpack环境搭建（三）打包性能优化

React

React是Facebook推出的JavaScript库。口号是“用来创建用户界面的JavaScript库”，所以它只是和用户界面打交道，可以把它看成MVC中的V（视图）层，项目中一般再配上Redux进行数据流和状态的管理。

实践React之前，强烈建议熟悉下React概念。

线上阅读推荐：
React技术栈之React（一）初识React
React技术栈之React（二）组件的prop和state
React技术栈之React（三）组件的生命周期

Redux

React的核心就是组件，它只负责view，当应用复杂程度增加时，还需要有数据流向控制、状态管理等方案。

React推出了Flux架构及其官方实现。同时业界也推出了很多Flux的实现，其中以Redux为翘楚，它将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。

直接使用Redux是有点烦的，因此React官方提供了react-redux库，它对redux api进行了封装，借助react-redux，可以在项目中更方便的使用Redux。

实践React之前，必须熟悉Redux和react-redux，了解Flex架构更好但不是必须。

线上阅读推荐：
Redux入门教程
React技术栈之Redux异步流
React技术栈之Redux高阶运用

react-router

路由库React-Router，是React体系的一个重要部分。它是官方维护的，事实上也是唯一可选的路由库。它通过管理URL，实现组件的切换和状态的变化。现在已经到了react-router4版本了，跟3版本用法有所不同。

实践React之前，可以了解下。

线上阅读参考：
React技术栈之React-Router(这个是react-router3)

UI框架

诸如 Ant Design、Material-UI、React bootstrap、React Desktop、Amaze UI React

React+Redux开发实录（一）搭建工程脚手架
React+Redux开发实录（二）React技术栈一览